<template>
  <div class="substitute-management">
    <el-card>
      <div slot="header">
        <span>代课任务管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">发布任务</el-button>
      </div>
      
      <!-- 搜索和筛选区域 -->
      <div class="search-area">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索课程名称或描述"
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleSearch"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
              <el-option label="草稿" value="draft" />
              <el-option label="已发布" value="published" />
              <el-option label="进行中" value="in_progress" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 任务列表 -->
      <el-table
        :data="taskList"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="courseName" label="课程名称" width="150" />
        <el-table-column prop="description" label="任务描述" width="250" show-overflow-tooltip />
        <el-table-column prop="reward" label="报酬" width="100">
          <template slot-scope="scope">
            ¥{{ scope.row.reward }}
          </template>
        </el-table-column>
        <el-table-column prop="classTime" label="上课时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.classTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="上课地点" width="150" />
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ getStatusName(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applicantCount" label="申请人数" width="100" />
        <el-table-column prop="createdAt" label="发布时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="info" @click="handleViewApplicants(scope.row)">申请人</el-button>
            <el-button 
              size="mini" 
              :type="scope.row.status === 'published' ? 'warning' : 'success'"
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.status === 'published' ? '下架' : '发布' }}
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-area">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SubstituteManagement",
  data() {
    return {
      loading: false,
      taskList: [],
      searchForm: {
        keyword: "",
        status: ""
      },
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  async created() {
    await this.loadTaskList()
  },
  methods: {
    async loadTaskList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.currentPage,
          size: this.pagination.pageSize,
          ...this.searchForm
        }
        const response = await this.$http.get("/admin/substitutes", { params })
        if (response.data.code === 200) {
          this.taskList = response.data.data.list
          this.pagination.total = response.data.data.total
        }
      } catch (error) {
        console.error("加载任务列表失败:", error)
        // 使用模拟数据
        this.loadMockData()
      } finally {
        this.loading = false
      }
    },

    loadMockData() {
      this.taskList = [
        {
          id: 1,
          courseName: "高等数学",
          description: "代上高等数学课程，需要认真听讲并做笔记",
          reward: 50,
          classTime: "2025-09-22T08:00:00",
          location: "教学楼A101",
          status: "published",
          applicantCount: 3,
          createdAt: "2025-09-20T10:00:00"
        },
        {
          id: 2,
          courseName: "英语口语",
          description: "代上英语口语课程，需要积极参与课堂讨论",
          reward: 40,
          classTime: "2025-09-21T14:00:00",
          location: "外语楼B201",
          status: "in_progress",
          applicantCount: 2,
          createdAt: "2025-09-19T14:30:00"
        }
      ]
      this.pagination.total = 2
    },

    handleSearch() {
      this.pagination.currentPage = 1
      this.loadTaskList()
    },

    handleReset() {
      this.searchForm = {
        keyword: "",
        status: ""
      }
      this.pagination.currentPage = 1
      this.loadTaskList()
    },

    handleAdd() {
      this.$message.info("发布代课任务功能开发中")
    },

    handleEdit() {
      this.$message.info("编辑代课任务功能开发中")
    },

    handleView() {
      this.$message.info("查看代课任务详情功能开发中")
    },

    handleViewApplicants() {
      this.$message.info("查看申请人功能开发中")
    },

    handleToggleStatus() {
      this.$message.info("切换任务状态功能开发中")
    },

    handleDelete() {
      this.$message.info("删除代课任务功能开发中")
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.loadTaskList()
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadTaskList()
    },

    getStatusType(status) {
      const statusMap = {
        draft: "info",
        published: "success",
        in_progress: "warning",
        completed: "success",
        cancelled: "danger"
      }
      return statusMap[status] || "info"
    },

    getStatusName(status) {
      const statusMap = {
        draft: "草稿",
        published: "已发布",
        in_progress: "进行中",
        completed: "已完成",
        cancelled: "已取消"
      }
      return statusMap[status] || "未知"
    },

    formatDate(date) {
      if (!date) return '未知'
      return new Date(date).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.substitute-management {
  padding: 0;
}

.search-area {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.pagination-area {
  margin-top: 20px;
  text-align: right;
}
</style>
